<template>
	<view>
		<view class="user-header padding-sm">
			<image src="../../static/image/userBg.png" mode="widthFix"/>
			<view class="nickName text-cut text-bold">高校定古高校定古迹官方及高校定古迹官方及高校定古迹官方及迹官方及</view>
			<view class="phone">15555555555</view>
		</view>
		<view class="cu-list menu padding-sm bg-white margin-left-sm margin-right-sm radius-lg">
			<view class="cu-item arrow" @click="navigatorTopage('fillRecord')">
				<view class="content">
					<text class="text-black">工单记录</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="navigatorTopage('question')">
				<view class="content">
					<text class="text-black">故障反馈</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="navigatorTopage('editPwd')">
				<view class="content">
					<text class="text-black">密码修改</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="showModal('quit')">
				<view class="content">
					<text class="text-black">退出登录</text>
				</view>
			</view>
		</view>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{ icon:'../../static/wxImage/record.png', label: '工单记录', right:'', clickFn: () => this.$navigateTo('/pages/user/fillRecord') },
					{ icon:'../../static/wxImage/car.png', label: '车辆信息', right:'', clickFn: () => this.$navigateTo('/pages/user/car') },
					{ icon:'../../static/wxImage/question.png', label: '问题反馈', right:'', clickFn: () => this.$navigateTo('/pages/user/feedback') },
					{ icon:'../../static/wxImage/service.png', label: '联系客服', right:'18951135000', clickFn: () => {uni.makePhoneCall({
						phoneNumber: '18951135000'
					})} },
					{ icon:'', label: '退出登录', right:'', clickFn: () => this.loginOut() },
				]
			};
		},
		computed: {
			carinfo() {
				return this.$store.state.carinfo
			}
		},
		methods: {
			navigatorTopage(url){
				uni.navigateTo({
					url
				})
			},
			runClickFn(index) {
				this.list[index].clickFn()
			},
			loginOut() {
				uni.showModal({
					content: '您确定要退出登录吗！',
					success: (res) => {
						if(res.confirm) {
							this.$http({
								url: this.$api.userUrl + 'logout',
							}).then(res => {
								this.$store.commit('logout', res.data);
								uni.clearStorage()
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-header{
		position:relative;
		width:750rpx;
		height:200rpx;
		box-sizing: border-box;
		image{
			position:absolute;
			left:20rpx;
			top:20rpx;
			width:710rpx;
			height:160rpx;
		}
		.nickName {
			color: #ffffff;
			position:absolute;
			left:40rpx;
			top:50rpx;
			font-size: 34rpx;
			z-index:999;
			width:680rpx;
		}
		.phone {
			position:absolute;
			left:40rpx;
			top:100rpx;
			font-size: 24rpx;
			color: #ffffff;
			width: 190rpx;
			height: 34rpx;
			line-height: 34rpx;
			border-radius: 17rpx;
			margin-top: 10rpx;
			z-index:999;
		}
	} 
.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 100%;
	margin-left: 30rpx;
	margin-right: 20rpx;
}

.list-wrapper {
	background: #ffffff;
	
	.cell-item {
		height: 106rpx;
		margin: 0 30rpx;
		&:not(:last-child) {
			border-bottom: 1rpx solid #E5E5E5;
		}
		.icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 16rpx;
		}
		.text {
			color: #333333;
			font-size: 30rpx;
		}
		.arrow {
			width: 40rpx;
			height: 40rpx;
		}
	}
}

</style>
